$(function(){   
    let $title = $(".me-info .header .title");
    let $container = $(".me-info .container");
    //判断地址栏的参数
    let $order = $(location).attr("href").split("=")[1];
    let meArr = ["修改密码","修改支付密码","","您已绑定如下学校用户","交易记录","订单列表","订单列表","订单列表","我的钱包","电子券","我的积分"];
    switch(Number($order)){
        case 0:
        $title.html(meArr[$order]);
        loginPass();
        break;
        case 1:
        $title.html(meArr[$order]);
        payPass();
        break;
        case 3:
        $title.html(meArr[$order]);
        changeStudent();
        break;
        case 4:
        $title.html(meArr[$order]);
        dealLog();
        break;
        case 5:
        $title.html(meArr[$order]);
        orderList();
        break;
        case 6:
        $title.html(meArr[$order]);
        orderList();
        break;
        case 7:
        $title.html(meArr[$order]);
        orderList();
        break;
        case 8:
        $title.html(meArr[$order]);
        accountBalance();
        break;
        case 9:
        $title.html(meArr[$order]);
        eCoupon();
        break;
        case 10:
        $title.html(meArr[$order]);
        availIntegral();
        break;
    };

    //修改密码
    function loginPass(){
        let $loginpass = $(`
            <div>
                <div class="old-password password">
                    <p>原密码</p>
                    <input type="password" placeholder="请输入原密码">
                </div>
                <div class="new-password password">
                    <p>新密码</p>
                    <input type="password" placeholder="请输入新密码">
                </div>
                <div class="comfirm-password password">
                    <p>确认密码</p>
                    <input type="password" placeholder="请再次输入新密码">
                </div>
                <div class="comfirm-change">
                    <button>确认修改</button>
                </div>
            </div>
        `);
        $container.append($loginpass);
        //密码框样式
        $loginpass.children(".password").css({
            "width":"80%",
            "height":".8rem",
            "margin":".1rem auto"
        });
        $loginpass.find(".password > p").css({
            "margin":".08rem 0"
        });
        $loginpass.find(".password input").css({
            "width":"100%",
            "height":".35rem",
            "border-radius":".04rem",
            "border":"none",
            "outline":"none",
            "border":"1px solid #ccc",
            "font-size":".18rem",
            "text-indent":".1rem"
        });
        $loginpass.children(".comfirm-change").css({
            "width":"100%",
            "text-align":"center",
            "margin-top":".3rem"
        });
        $loginpass.find(".comfirm-change > button").css({
            "width":"80%",
            "height":".4rem",
            "border-radius":".04rem",
            "border":"none",
            "outline":"none",
            "background":"#11e1ee",
            "color":"#fff"
        });
        let alertFlag = true;
        $loginpass.find(".comfirm-change").children("button").click(function(){
            let $alert = $("<div>请输入原密码</div>");
            //弹窗样式
            $alert.css({
                "position":"absolute",
                "top":".2rem",
                "left":"20%",
                "width":"60%",
                "height":".4rem",
                "background":"#d84c31",
                "color":"#fff",
                "text-align":"center",
                "line-height":".4rem",
                "border-radius":".04rem",
                "box-shadow":".02rem .02rem .06rem #000"
            });
            //弹窗事件
            let $alertMethods = $loginpass.find(".password input").eq(0);
            if(alertFlag){
                switch($alertMethods.attr("placeholder")){
                    case "请输入原密码":
                    $alert.html("请输入原密码");
                    $container.append($alert);
                    break;
                    case "请输入新支付密码":  
                    $alert.html("请输入新支付密码");
                    $container.append($alert);
                    break;
                };                   
                alertFlag = false;
            };              
            setTimeout(function(){
                $alert.remove();
                alertFlag = true;
            },2000);
        });
    };

    //修改支付密码
    function payPass(){
        let $paypass = $(`
            <div>
                <div class="old-password password">
                    <p>原支付密码</p>
                    <input type="password" placeholder="请输入原支付密码">
                </div>
                <div class="new-password password">
                    <p>新支付密码</p>
                    <input type="password" placeholder="请输入新支付密码">
                </div>
                <div class="comfirm-password password">
                    <p>确认密码</p>
                    <input type="password" placeholder="请再次输入新密码">
                </div>
                <div class="comfirm-change">
                    <button>确认修改</button>
                    <p>注：支付密码用于储存支付时确认密码</p>
                </div>
            </div>
        `);
        $container.append($paypass);
        //密码框样式
        $paypass.children(".password").css({
            "width":"80%",
            "height":".8rem",
            "margin":".1rem auto"
        });
        $paypass.find(".password > p").css({
            "margin":".08rem 0"
        });
        $paypass.find(".password input").css({
            "width":"100%",
            "height":".35rem",
            "border-radius":".04rem",
            "border":"none",
            "outline":"none",
            "border":"1px solid #ccc",
            "font-size":".18rem",
            "text-indent":".1rem"
        });
        $paypass.children(".comfirm-change").css({
            "width":"100%",
            "text-align":"center",
            "margin-top":".3rem"
        });
        $paypass.find(".comfirm-change > button").css({
            "width":"80%",
            "height":".4rem",
            "border-radius":".04rem",
            "border":"none",
            "outline":"none",
            "background":"#11e1ee",
            "color":"#fff"
        });
        $paypass.find(".comfirm-change > p").css({
            "width":"80%",
            "margin":".2rem auto",
            "font-size":".2rem",
            "text-align":"left"
        });
        let alertFlag = true;
        $paypass.find(".comfirm-change").children("button").click(function(){
            let $alert = $("<div>请输入原支付密码</div>");
            //弹窗样式
            $alert.css({
                "position":"absolute",
                "top":".2rem",
                "left":"20%",
                "width":"60%",
                "height":".4rem",
                "background":"#d84c31",
                "color":"#fff",
                "text-align":"center",
                "line-height":".4rem",
                "border-radius":".04rem",
                "box-shadow":".02rem .02rem .06rem #000"
            });
            //弹窗事件
            let $alertMethods = $paypass.find(".password input").eq(0);
            if(alertFlag){
                switch($alertMethods.attr("placeholder")){
                    case "请输入原支付密码":
                    $alert.html("请输入原支付密码");
                    $container.append($alert);
                    break;
                    case "请输入新支付密码":  
                    $alert.html("请输入新支付密码");
                    $container.append($alert);
                    break;
                };                   
                alertFlag = false;
            };              
            setTimeout(function(){
                $alert.remove();
                alertFlag = true;
            },2000);
        });
    };

    //切换学员
    function changeStudent(){
        $title.css("background","#3db8fa");
        let $changestudent = $(`
            <div>
                <div class="school-code">
                    学校代码：<span>yanshi</span>
                </div>
                <div class="school-student">
                    <span>赵昂</span>
                    <span class="button">切换</span>
                    <span style="color:#3db8fa">已默认</span>
                    <span class="button">解绑</span>
                </div>
                <button class="school-bind">绑定新用户</button>
            </div>
        `);
        $container.append($changestudent);
        $changestudent.css("width","100%");
        $changestudent.children(".school-code").css({
            "width":"90%",
            "height":".3rem",
            "border-left":".04rem solid #7cfd91",
            "text-indent":".1rem",
            "margin":".1rem auto",
            "font-weight":"lighter"
        });
        $changestudent.children(".school-student").css({
            "display":"flex",
            "width":"100%",
            "height":".5rem",
            "line-height":".5rem",
            "border-top":".04rem solid #ccc",
            "font-weight":"lighter"
        });
        $changestudent.find(".school-student > span").css({
            "width":"25%",
            "text-align":"center"
        });
        $changestudent.find(".school-student > span.button").css({
            "width":"11%",
            "height":".3rem",
            "line-height":".3rem",
            "margin":".1rem 7%",
            "background":"#3db8fa",
            "color":"#fff",
            "border-radius":".06rem",
            "font-size":".18rem"
        });
        $changestudent.children(".school-bind").css({
            "display":"block",
            "width":"80%",
            "height":".5rem",
            "line-height":".5rem",
            "margin":".2rem auto",
            "text-align":"center",
            "background":"#3db8fa",
            "outline":"none",
            "border":"none",
            "color":"#fff",
            "border-radius":".06rem",
            "font-size":".24rem"
        });
        //切换
        $changestudent.find(".school-student > span.button").eq(0).click(function(){
            $(location).attr("href","../index.html");
        });
        //解绑
        $changestudent.find(".school-student > span.button").eq(1).click(function(){
            unbindAlert();
        });

        let unbindFlag = true;
        function unbindAlert(){
            let $unbind = $(`
                <div>
                    <ul class="unbind">
                        <li class="unbind-tips">提示<li>
                        <li class="unbind-info">解绑后将不再接收该学员相关信息，是否继续？<li>
                        <li class="unbind-choose">
                            <span>确认</span>    
                            <span style="margin-right:.2rem">取消</span>    
                        <li>
                    </ul>    
                </div>
            `);
            if(unbindFlag){
                $(".me-info").append($unbind);
                unbindFlag = false;
            };
            $unbind.css({
                "position":"absolute",
                "top":"0",
                "left":"0",
                "width":"100%",
                "height":"100%",
                "background":"rgba(0,0,0,.3)"
            });
            $unbind.children(".unbind").css({
                "width":"3rem",
                "height":"2rem",
                "background":"#fff",
                "margin":"50% auto",
                "border-radius":".08rem",
                "box-shadow":"0 0 .1rem #ccc"
            });
            $unbind.find(".unbind .unbind-tips").css({
                "width":"100%",
                "height":".5rem",
                "line-height":".5rem",
                "text-indent":".2rem",
                "border-bottom":"1px solid #ccc",
                "font-size":".24rem"
            });
            $unbind.find(".unbind .unbind-info").css({
                "width":"2.8rem",
                "height":".7rem",
                "text-align":"center",
                "padding":".2rem .1rem 0",
                "border-bottom":"1px solid #ccc",
                "font-size":".2rem"
            });
            $unbind.find(".unbind .unbind-choose").css({
                "width":"100%",
                "height":".6rem",
                "line-height":".6rem",
                "text-align":"right"
            });
            $unbind.find(".unbind .unbind-choose > span").css({
                "display":"inline-block",
                "width":".7rem",
                "height":".4rem",
                "line-height":".4rem",
                "text-align":"center",
                "background":"#337ab7",
                "color":"#fff",
                "border-radius":".04rem",
                "font-size":".2rem",
                "text-decoration":"underline"
            });
            $unbind.find(".unbind .unbind-choose > span").eq(1).css({
                "background":"#eee",
                "color":"#000"
            });
            //取消按钮
            $(".unbind").parent().css("display","block");
            let $cancel = $unbind.find(".unbind .unbind-choose > span").eq(1);
            $cancel.click(function(){
                $unbind.hide();
            });
        };
    };

    //交易记录
    function dealLog(){
        let $log = $(`
            <ul>
                <li class="log-items">
                    <p style="font-size:.24rem">
                        <span>00000019(交费)</span>
                        <span style="float:right;margin-right:.2rem">100.00</span>
                    </p>
                    <p class="log-time" style="color:#999">2019-08-06</p>
                </li>
            </ul>
        `);
        $container.append($log);
        $("body").css("background","#fff");
        $log.css("width","100%");
        $log.children(".log-items").css({
            "width":"100%",
            "height":".8rem",
            "border-bottom":"1px solid #ccc",
            "line-height":".4rem",
            "text-indent":".2rem"
        });
    };

    //查看全部订单
    function orderList(){
        let $orderlist = $("<div></div>");
        $container.append($orderlist);
        $orderlist.css({
            "width":"100%",
            "height":"5rem",
            "background":"url(../imgs/me/me_noorder.jpg) center/cover"
        });
    };

    //账户余额
    function accountBalance(){
        let $account = $(`
            <div>
                <p>充值金额：<span style="font-size:.3rem">￥0.0</span></p>
                <p>赠送金额：<span style="font-size:.3rem">￥0.0</span></p>
            </div>
        `);
        $container.append($account);
        $account.css({
            "width":"100%",
            "height":"1rem",
            "margin-top":".02rem",
            "background":"#11e1ee",
            "color":"#fff",
            "line-height":".4rem",
            "padding-top":".2rem",
            "text-indent":"1rem"
        });
    };

    //电子券
    function eCoupon(){
        let $commision = $(`
        <div>
            <ul class="level">
                <li>未使用</li>
                <li>已过期</li>
                <li>已使用</li>
            </ul>
            <div class="rec-info">暂无电子券</div>
        </div>
    `);
        $container.append($commision);
        $commision.css({
            "width":"100%"
        });
        $commision.children(".level").css({
            "display":"flex",
            "width":"100%",
            "height":".6rem",
            "border-top":"1px solid #ccc"
        });
        $commision.find(".level li").css({
            "width":"33.3%",
            "border-right":"1px solid #ccc",
            "line-height":".6rem",
            "text-align":"center",
            "border-bottom":"1px solid #ccc",
        });
        $commision.find(".level li").eq(0).css({
            "color":"#f76368",
            "border-bottom":"2px solid #f76368"
        });
        $commision.find(".level li").eq(2).css("border-right","none");
        $commision.children(".rec-info").css({
            "width":"100%",
            "height":"1rem",
            "line-height":"1rem",
            "text-align":"center"
        });
        //各级点击事件
        $commision.find(".level li").each(function(index){
            $commision.find(".level li").eq(index).click(function(){
                $(this).css({
                    "color":"#f76368",
                    "border-bottom":"2px solid #f76368"
                });
                $(this).siblings("li").css({
                    "color":"#000",
                    "border-bottom":"1px solid #ccc"
                });
            });
        });
    };

    //可用积分
    function availIntegral(){
        let $avail = $(`
            <div>
                <p>可用积分：<span style="font-size:.3rem">40.00</span>个</p>
            </div>
        `);
        $container.append($avail);
        $avail.css({
            "width":"100%",
            "height":"1.2rem",
            "margin-top":".02rem",
            "background":"#11e1ee",
            "color":"#fff",
            "line-height":"1rem",
            "text-align":"center",
            "font-weight":"bold"
        });
    };
})